<template>
	<view class="container flex-c">
		<uni-nav-bar class="ch-nav" height="88rpx" backgroundColor="#ffffff" leftWidth="90rpx" rightWidth="90rpx" color="#333" :fixed="true" :padding="false" :border="navBorder" @clickLeft="$goBack(1)">
			<template slot="left">
				<image class="left" src="@/public/images/public/dhl_fhjt.png" mode="aspectFit"></image>
			</template>
			<text class="title">赛事选择</text>
		</uni-nav-bar>
		<view class="match-list">
			<template v-for="(match, index) in matchList">
				<view class="match-list-item flex-r" :key="index" v-if="match.id && match.statusId > 0 && matchId != match.id" @tap="select = index">
					<view class="left flex-c">
						<text class="color-grey">{{match.shortNameZh}}</text>
					</view>
					<view class="center flex-c">
						<view class="top flex-r color-grey">
							<view class="center-left">
								<uni-dateformat class="date" :date="match.matchTime" format="MM.dd hh:mm"></uni-dateformat>
							</view>
							<view class="center-center">
								{{(match.statusId > 1 && match.statusId < 8) ? '进行中' : $CHS.getMatchFootStatus(match.statusId)}}
							</view>
							<view class="center-right"></view>
						</view>
						<view class="middle flex-r">
							<view class="center-left flex-r">
								<view class="name">
									<text>{{match.lotteryType !== 201 ? match.homeNameZh : match.awayNameZh}}</text>
								</view>
							</view>
							<view class="center-center color-red">
								<text>VS</text>
							</view>
							<view class="center-right flex-r">
								<view class="name">
									<text>{{match.lotteryType !== 201 ? match.awayNameZh : match.homeNameZh}}</text>
								</view>
							</view>
						</view>
					</view>
					<view class="right">
						<image v-if="select == index" src="@/public/images/apply/ssxz.png" mode="aspectFit"></image>
					</view>
				</view>
			</template>
		</view>
		<view class="foot bottom-ios">
			<view class="submit-box" @tap="submit">
				<button :class="{'active': select != null}">确定</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				categoryCode: null,
				matchList: [],
				select: null,
				matchId: null,
				
				canLeave: false,
				navBorder: false
			};
		},
		onPageScroll(e) {
			if(e.scrollTop > 10){
				this.navBorder = true
			}else{
				this.navBorder = false
			}
		},
		onLoad() {
			console.log(this.$Route.query);
			this.categoryCode = this.$Route.query.category
			this.matchId = this.$Route.query.matchId
			if(this.categoryCode){
				this.getMatchList() //查询料详情
			}else{//非法请求处理
				console.log('非法请求');
				uni.showToast({
					title: '请求数据错误，请返回重试',
					icon: 'none'
				})
				this.$goBack(1)
			}
		},
		onUnload() {
			if(!this.canLeave){
				uni.$emit('select', null)
			}
		},
		methods: {
			//确定
			submit() {
				if(this.select != null){
					uni.$emit('select', this.matchList[this.select])
					this.canLeave = true
					this.$goBack(1)
				}else{
					uni.showToast({
						title: '请选择比赛',
						icon: 'none'
					})
				}
			},
			//赛事列表
			getMatchList() {
				this.$http.get({
					url: '/api/expertQueryMatchRows',
					data: {
						code: this.categoryCode
					},
				}).then((data) => {
					if(data.success && data.result[0]){
						this.matchList = data.result
					}else{
						uni.showToast({
							title: '当前玩法没有比赛，请重新选择',
							icon: 'none'
						})
						this.$goBack(1)
					}
				}).catch((err) => {
					console.log(err);
				})
			}
		}
	}
</script>

<style lang="scss">
	.container{
		padding: 0;
	}
	.match-list{
		margin-top: 20rpx;
		margin-bottom: calc(140rpx + var(--safe-area-inset-bottom) + var(--vh-offset, 0px));
		background-color: #fff;
	}
	.match-list-item{
		padding: 30rpx 20rpx;
		border-bottom: #EDEDED 1rpx solid;
		//content-visibility: auto;
		.left{
			width: 100rpx;
			.color-grey{
				font-size: 22rpx;
				line-height: 22rpx;
				font-family: Arial;
			}
			.color-blue{
				margin-top: 20rpx;
				font-size: 22rpx;
				font-family: Arial;
				line-height: 40rpx;
			}
		}
		.center{
			flex: 2;
			.center-center{
				width: 120rpx;
				text-align: center;
			}
			.center-left{
				flex: 2;
				text-align: right;
			}
			.center-right{
				flex: 2;
				text-align: left;
			}
			.top{
				font-size: 22rpx;
				line-height: 22rpx;
				font-family: Arial;
			}
			.middle{
				margin-top: 20rpx;
				font-size: 26rpx;
				line-height: 40rpx;
				font-weight: bold;
				.name{
					max-width: 160rpx;
					word-break: break-all;
					word-wrap: break-word;
				}
				.center-right{
					justify-content: flex-start;
				}
				.center-left{
					justify-content: flex-end;
				}
			}
			.bottom{
				text-align: center;
				font-size: 20rpx;
				line-height: 20rpx;
				margin-top: 20rpx;
			}
		}
		.right{
			width: 100rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			image{
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
	.match-list-item:last-child{
		border: none;
	}
	.foot{
		max-width: $max-width;
		margin: $pc-margin;
		background-color: #fff;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		box-shadow: 0px -1px 0px 0px #EDEDED;
		.submit-box{
			margin: 16rpx 20rpx;
			button{
				height: 88rpx;
				line-height: 88rpx;
				border-radius: 44rpx;
			}
		}
	}
</style>
